<template>
  <div class="con">
    <div class="contbox6_10" v-if="type == 1">
      <!-- 机构列表 -->
      <p class="titlelist6_10">积分管理 / 积分列表</p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item
              label="机构ID"
              v-if="typebox == 2"
              style="float: left"
            >
              <el-input
                v-model="form.officeUid"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="机构名称"
              v-if="typebox == 2"
              style="float: left"
            >
              <el-input
                v-model="form.officeName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动名称" style="float: left">
              <el-input
                v-model="form.pointsName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" style="float: left; margin-right: 40px">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="3"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item
            style="float: right;margin-right: 20px;    margin-top: 10px;text-align: right;"
          > -->
          </el-form>
        </div>

        <div class="buttons">
          <el-button style="margin-right: 10px" type="primary" @click="onSubmit"
            >搜索</el-button
          >
          <el-button type="" @click="reset">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="butt"
            style="margin-left:40px"
            @click="establish(2, type)"
            >创建</el-button
          >
          <el-button
            v-if="totalNum > 0"
            type="primary"
            class="butt"
            @click="exportes()"
            >批量导出</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="45"> </el-table-column>
          <el-table-column
            :span="8"
            prop="officeUid"
            v-if="typebox == 2"
            label="机构ID"
            min-width="250"
          >
          </el-table-column>
          <el-table-column
            prop="officeName"
            v-if="typebox == 2"
            label="机构名称"
            min-width="120"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="pointsName" label="规则名称" min-width="150">
          </el-table-column>
          <el-table-column prop="points" label="获取积分数" min-width="400">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="有效期" min-width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.startDate }} -</span>
              <span>{{ scope.row.endDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="150">
          </el-table-column>
          <el-table-column label="操作" min-width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="typebox == 2 && isAuth('integralDetails')"
                @click="toDetailPage(2, scope.row.id, 0)"
                >查看</el-button
              >
              <el-button
                type="text"
                v-if="typebox == 0 && isAuth('integralEditor')"
                @click="toDetailPage(2, scope.row.id, 1)"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="stopUse(scope.row.id, 0)"
                v-if="scope.row.status == '停用' && isAuth('integralDisabled')"
                >启用</el-button
              >
              <el-button
                style="color: #f56c6c"
                type="text"
                @click="stopUse(scope.row.id, 3)"
                v-if="scope.row.status != '停用' && isAuth('integralDisabled')"
                >停用</el-button
              >
              <el-button
                type="text"
                v-if="isAuth('integralDetailed')"
                @click="toDetailPage(3, scope.row.id)"
                >明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div></div>

        <el-pagination
          style="text-align: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[20, 50, 100]"
          :page-size="form.number"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <integradeCreat v-if="type == 2"></integradeCreat>
    <integradetailPage
      v-if="type == 3"
      v-on:type="toDetailPage"
      newType="newType"
    ></integradetailPage>
  </div>
</template>

<script>
import integradetailPage from "./integradetailPage.vue";
import integradeCreat from "./integradeCreat.vue";
export default {
  name: "integralmanage",
  data() {
    return {
      typebox: 0,
      type: 1,
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      newType: "",
      form: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        officeUid: "",
        officeName: "",
        status: "",

        master: "",
        authStatus: "",
        page: 1,
        number: 20
      },
      tableData: [],
      multipleSelection: []
      //   urltype: this.GLOBAL.httpurl,
    };
  },
  // 页面初始化
  mounted: function() {
    // _this.type=1
    window.scrollTo(0, 0);
    var _this = this;
    _this.typebox = localStorage.getItem("jurisdiction");
    sessionStorage.setItem("huixianid", "");
    _this.list();
  },
  watch: {
    // 监听type的变化情况
    type: function(newVal, oldVal) {
      //type是data的return返回对象中的数组变量，newVal是属性变化后的值，oldVal是属性变化前的值
      if (newVal == 1) {
        this.list();
      }
    }
  },
  components: {
    integradeCreat,
    integradetailPage
  },
  methods: {
    // 重置
    reset() {
      this.form.officeName = "";
      this.form.pointsName = "";
      this.form.status = "";
      this.form.oemName = "";
      this.form.oEMName = "";
      this.form.startDate = "";
      this.form.endDate = "";
      this.form.officeUid = "";
      this.form.page=1
      this.mechanism = "";
      this.dataTime = [];
      this.list();
    },
    // 点击创建按钮
    establish(type) {
      //创建页
      sessionStorage.setItem("newType", type);
      localStorage.setItem("isEdit", "1"); //创建页 可编辑标识
      sessionStorage.setItem("jifenId", "");
      this.type = type;
    },
    toDetailPage(val, id, operateType) {
      console.log(val);
      //明细
      //val 2-查看和编辑页 3-明细页  id-当前积分id   operateType:0查看  1编辑
      sessionStorage.setItem("jifenId", id);
      if (val == 2 && operateType == 0) {
        localStorage.setItem("isEdit", "");
        localStorage.setItem("isEdit", "0");
      } else if (val == 2 && operateType == 1) {
        localStorage.setItem("isEdit", "");
        localStorage.setItem("isEdit", "2");
      } //详情页 不可编辑标识
      else {
        localStorage.setItem("isEdit", "1");
      }
      this.type = val;
    },
    // 停用按钮
    stopUse(n, s) {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/points/editStatus",
          data: {
            id: n,
            status: s
          }
        })
        .then(function(d) {
          console.log(d);
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
            _this.list();
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 搜索按钮
    onSubmit() {
      this.form.page = 1;
      this.list();
    },
    // 批量导出
    exportes() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/office/excel/export",
          responseType: "blob",
          data: _this.form
        })
        .then(function(d) {
          let blob = new Blob([d.data], { type: "application/vnd.ms-excel" });
          /*let objectUrl = URL.createObjectURL(blob);
          window.location.href = objectUrl;*/
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();
          date =
            year +
            "" +
            month +
            "" +
            day +
            "" +
            hour +
            "" +
            minute +
            "" +
            second; //'+date+'

          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "机构列表" + date + ".xls"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 初始化列表
    list() {
      var _this = this;

      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/points/list",
          data: _this.form
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            for (var s = 0; s < _this.tableData.length; s++) {
              //状态有 已上线  未上线  已过期
              if (_this.tableData[s].status == 0) {
                _this.tableData[s].status = "上线";
              }
              if (_this.tableData[s].status == 1) {
                _this.tableData[s].status = "未上线";
              }
              if (_this.tableData[s].status == 2) {
                _this.tableData[s].status = "过期";
              }
              if (_this.tableData[s].status == 3) {
                _this.tableData[s].status = "停用";
              }
            }

            _this.totalNum = d.data.total;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 分页改变
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.list();
    },
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/

      this.form.page = val; //动态改变
      this.list();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
/deep/ .el-form-item {
  /* width: 450px !important; */
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
